<template>
	<view>
		<!-- 通过对象来控制class添加与否，键是类名，值是布尔值，决定这个class是否被采用 -->
		<!-- 样式:条件 -->
		<view :class="{'text2':psCount>8,'text3':psCount>8}">邀请好友获取积分</view>
		<!-- 样式:值 -->
		<view :style="{color:color1,fontSize:textSize+'px'}">邀请好友获取积分</view>

		<!-- 样式：条件 可以加入固定的class -->
		<!-- 通过数组来包含所有要应用到元素上的class，数组中可以是字符串，也可以是表达式，为true时，应用class -->

		<view :class="[{text2:psCount>8},{'text3':psCount>8},{'text4':psCount>8},'text5']">邀请好友获取积分</view>
		<!-- 样式:值 -->
		<view :style="[{color:color1,color:'#249cfa',fontSize:'20px',fontWeight:'bold'}]">邀请好友获取积分</view>
		<!-- 对象绑定使用键值对的方式，更接近于条件判断。 -->
		<!-- 数组绑定使用数组和三元表达式或者逻辑运算符，更接近于编程中的数组操作。 -->

		<view :class="[psCount>8?'text1':'text2','text3','text4','text5']">邀请好友获取积分</view>
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				psCount: 10,
				color1: '#248cfa',
				textSize: 20
			}
		},
		methods: {

		}
	}
</script>

<style>
	.text1 {
		color: rebeccapurple;
	}

	.text2 {
		color: red;
	}

	.text3 {
		font-size: 40rpx;
	}

	.text4 {
		font-weight: bold;
	}

	.text5 {
		text-decoration: underline;
	}
</style>